<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>案例管理</h2>
      <p>管理幼儿园各类安全与教育案例资源库</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <div class="stat-card">
            <div class="stat-content">
              <div class="stat-label">安全应急案例</div>
              <div class="stat-number">843</div>
              <div class="stat-change positive">↑12% 较上月</div>
            </div>
            <div class="stat-icon">
              <i class="el-icon-document"></i>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <div class="stat-card safety">
            <div class="stat-content">
              <div class="stat-label">智育案例</div>
              <div class="stat-number">180</div>
              <div class="stat-change positive">↑8% 较上月</div>
            </div>
            <div class="stat-icon safety-icon">
              <i class="el-icon-school"></i>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <div class="stat-card education">
            <div class="stat-content">
              <div class="stat-label">本园私有案例</div>
              <div class="stat-number">120</div>
              <div class="stat-change negative">↓3% 较上月</div>
            </div>
            <div class="stat-icon education-icon">
              <i class="el-icon-home"></i>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-container">
      <el-row :gutter="20">
        <!-- 左侧树形分类 -->
        <el-col :xs="24" :sm="24" :md="6" :lg="5" :xl="4">
          <div class="category-container">
            <h3>案例分类</h3>
            <el-tree
              v-model:current-node-key="currentNodeKey"
              :data="categoryTree"
              node-key="id"
              @node-click="handleNodeClick"
              :expand-on-click-node="false"
            >
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <span class="category-icon" :class="`level-${data.level}`">
                    <i :class="data.icon"></i>
                  </span>
                  <span class="category-label">{{ node.label }}</span>
                  <span v-if="data.count" class="category-count">({{ data.count }})</span>
                </div>
              </template>
            </el-tree>
          </div>
        </el-col>

        <!-- 右侧案例列表 -->
        <el-col :xs="24" :sm="24" :md="18" :lg="19" :xl="20">
          <div class="case-list-container">
            <!-- 操作栏 -->
            <div class="action-bar">
              <div>
                <el-button type="primary" class="add-btn">
                  <i class="el-icon-plus"></i> 添加案例
                </el-button>
                <el-button>
                  <i class="el-icon-download"></i> 导出数据
                </el-button>
              </div>
              <div class="search-filter">
                <el-input
                  v-model="searchQuery"
                  placeholder="搜索案例..."
                  prefix-icon="el-icon-search"
                  class="search-input"
                />
                <el-select
                  v-model="selectedType"
                  placeholder="全部案例类型"
                  class="type-select"
                >
                  <el-option label="全部案例类型" value="" />
                  <el-option label="安全应急案例" value="provincial_safety" />
                  <el-option label="智育案例" value="intellectual_education" />
                  <el-option label="本园私有案例" value="private_case" />
                </el-select>
              </div>
            </div>

            <!-- 案例表格 -->
            <el-table :data="caseList" style="width: 100%">
              <el-table-column prop="name" label="案例名称" min-width="200">
                <template #default="{ row }">
                  <div class="case-name-container">
                    <span class="case-name">{{ row.name }}</span>
                    <span class="case-code">{{ row.code }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="案例类型" min-width="150">
                <template #default="{ row }">
                  <el-tag :type="getTagType(row.type)">{{ row.type }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="publishDate" label="发布日期" min-width="120" />
              <el-table-column prop="usageCount" label="使用次数" min-width="100" />
              <el-table-column prop="status" label="状态" min-width="100">
                <template #default="{ row }">
                  <el-tag type="success" v-if="row.status === '已启用'">已启用</el-tag>
                  <el-tag type="danger" v-else>已禁用</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="operation" label="操作" min-width="120" fixed="right">
                <template #default="{ row }">
                  <el-button size="small" type="primary" icon="el-icon-view" circle />
                  <el-button size="small" class="edit-btn" icon="el-icon-edit" circle />
                  <el-button size="small" class="delete-btn" icon="el-icon-delete" circle />
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <span class="page-info">显示 1 至 3 条，共 120 条</span>
              <el-pagination
                layout="prev, pager, next"
                :total="120"
                :page-size="10"
                :current-page="currentPage"
                @current-change="handleCurrentChange"
              />
              <el-select
                v-model="pageSize"
                placeholder="每页显示"
                class="page-size-select"
                @change="handlePageSizeChange"
              >
                <el-option label="10" value="10" />
                <el-option label="20" value="20" />
                <el-option label="50" value="50" />
                <el-option label="100" value="100" />
              </el-select>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const currentNodeKey = ref(null)
const searchQuery = ref('')
const selectedType = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 树形分类数据
const categoryTree = ref([
  {
    id: 1,
    label: '幼儿安全应急',
    level: 1,
    icon: 'el-icon-warning',
    count: 843,
    children: [
      {
        id: 11,
        label: '消防安全',
        level: 2,
        icon: 'el-icon-fire',
        count: 150
      },
      {
        id: 12,
        label: '食品安全',
        level: 2,
        icon: 'el-icon-s-food',
        count: 130
      },
      {
        id: 13,
        label: '交通安全',
        level: 2,
        icon: 'el-icon-truck',
        count: 120
      },
      {
        id: 14,
        label: '应急疏散',
        level: 2,
        icon: 'el-icon-guide',
        count: 100
      }
    ]
  },
  {
    id: 2,
    label: '幼儿教育案例',
    level: 1,
    icon: 'el-icon-school',
    count: 488,
    children: [
      {
        id: 21,
        label: '智育案例',
        level: 2,
        icon: 'el-icon-lightbulb',
        count: 180
      },
      {
        id: 22,
        label: '德育案例',
        level: 2,
        icon: 'el-icon-star-on',
        count: 120
      },
      {
        id: 23,
        label: '体育案例',
        level: 2,
        icon: 'el-icon-running',
        count: 60
      },
      {
        id: 24,
        label: '美育案例',
        level: 2,
        icon: 'el-icon-picture',
        count: 60
      }
    ]
  },
  {
    id: 3,
    label: '园方案例',
    level: 1,
    icon: 'el-icon-home',
    count: 120,
    children: [
      {
        id: 31,
        label: '大型活动案例',
        level: 2,
        icon: 'el-icon-flag',
        count: 50
      },
      {
        id: 32,
        label: '家长工作案例',
        level: 2,
        icon: 'el-icon-user',
        count: 40
      },
      {
        id: 33,
        label: '日常管理案例',
        level: 2,
        icon: 'el-icon-setting',
        count: 30
      }
    ]
  }
])

// 案例列表数据
const caseList = ref([
  {
    id: 1,
    name: '幼儿园火灾应急处理规范',
    code: 'SAF-2023-001',
    type: '省级以上安全应急案例',
    publishDate: '2023-09-15',
    usageCount: 42,
    status: '已启用'
  },
  {
    id: 2,
    name: '幼儿早期阅读能力培养方案',
    code: 'EDU-2023-045',
    type: '智育案例',
    publishDate: '2023-08-22',
    usageCount: 18,
    status: '已启用'
  },
  {
    id: 3,
    name: '本园过渡幼儿应急预案',
    code: 'PRI-2023-112',
    type: '大型活动案例',
    publishDate: '2023-10-05',
    usageCount: 7,
    status: '已启用'
  }
])

// 方法
const handleNodeClick = (data) => {
  console.log('点击分类:', data)
  // 这里可以根据选择的分类筛选案例列表
  // 实际项目中应该调用API获取对应分类的案例
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  console.log('当前页:', val)
  // 这里可以根据页码获取对应的数据
}

const handlePageSizeChange = (val) => {
  pageSize.value = val
  console.log('每页显示:', val)
  // 这里可以根据每页显示条数获取对应的数据
}

const getTagType = (type) => {
  if (type.includes('安全')) return 'warning'
  if (type.includes('智育')) return 'success'
  if (type.includes('大型活动')) return 'info'
  return 'primary'
}
</script>

<style scoped>
/* 页面容器 */
.app-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.page-header p {
  font-size: 14px;
  color: #606266;
  margin: 0;
}

/* 统计卡片 */
.stats-container {
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

.stat-card.safety {
  border-left: 4px solid #67c23a;
}

.stat-card.education {
  border-left: 4px solid #e6a23c;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stat-number {
  font-size: 28px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
}

.stat-change.positive {
  color: #67c23a;
}

.stat-change.negative {
  color: #f56c6c;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ecf5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #409eff;
}

.stat-icon.safety-icon {
  background-color: #f0f9eb;
  color: #67c23a;
}

.stat-icon.education-icon {
  background-color: #fdf6ec;
  color: #e6a23c;
}

/* 主要内容区域 */
.content-container {
  margin-top: 24px;
}

/* 左侧分类容器 */
.category-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.category-container h3 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 16px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.category-icon {
  margin-right: 8px;
  font-size: 18px;
}

.category-icon.level-1 {
  color: #409eff;
}

.category-icon.level-2 {
  color: #67c23a;
  font-size: 16px;
}

.category-label {
  flex: 1;
  cursor: pointer;
}

.category-count {
  font-size: 12px;
  color: #909399;
}

/* 右侧案例列表 */
.case-list-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 操作栏 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.add-btn {
  margin-right: 10px;
}

.search-filter {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-input {
  width: 200px;
}

.type-select {
  width: 180px;
}

/* 表格样式 */
.el-table {
  margin-bottom: 20px;
}

.el-table__header-wrapper th {
  background-color: #f5f7fa;
  font-weight: 500;
}

.case-name-container {
  display: flex;
  flex-direction: column;
}

.case-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.case-code {
  font-size: 12px;
  color: #909399;
}

.edit-btn {
  color: #409eff;
}

.delete-btn {
  color: #f56c6c;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.page-info {
  font-size: 14px;
  color: #606266;
}

.page-size-select {
  width: 120px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-filter {
    flex-direction: column;
  }
  
  .search-input,
  .type-select {
    width: 100%;
  }
  
  .pagination-container {
    flex-direction: column;
    align-items: center;
  }
}
</style>